<script setup lang="ts">
import HomeCategory from './components/HomeCategory.vue';
import HomeBanner from './components/HomeBanner.vue';
// import HomePanel from './components/HomePanel.vue';
import HomeNew from './components/HomeNew.vue';
import HomeHot from './components/HomeHot.vue';
import { onMounted, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';

// const show = ref(false)
</script>

<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory></HomeCategory>
        <!-- banner轮播图 -->
        <HomeBanner></HomeBanner>
        <!-- 新鲜好物 -->
        <!-- <HomePanel title="新鲜好物" subTitle="新鲜出炉 品质靠谱"></HomePanel> -->
        <HomeNew></HomeNew>
        <!-- 人气推荐 -->
        <HomeHot></HomeHot>
        <!-- 测试 -->
        <!-- <img ref="res" width="200" height="200"> -->
        <!-- <button @click="show = !show">动画按钮</button>
        <Transition>
          <div v-if="show">内容区域</div>
        </Transition> -->
      </div>
    </div>
  </div>
</template>

<style>
  /* .v-enter-active, .v-leave-active {
  transition: opacity 5s;
}
.v-enter, .v-leave-to {
  opacity: 0;
} */

</style>